<script setup>
import {ref, reactive, watch, onMounted} from 'vue';
import {ElMessage, ElLoading, ElMessageBox} from 'element-plus';
import formdate from '../../../../public/JavaScript/until/fromatDate.js'
import ajax from '../../../../public/JavaScript/api/ajax.js';
import {export_goods_data} from "@/api/ExportData";
import axios from "axios";
import {decode} from "js-base64";

let data = reactive({
  saom: [],
  cx: [],
  wl: [],
  cgf: [],
  selectArr: [],
  bbh: [],
  qx: [],
})
let pageInf = reactive({})
let loding = reactive({
  saom: false,
  cx: false
})
let form = reactive({
  tm: '',
  dj: '',
  select: {
    "endTime": "",
    "fBarCode": "",
    "fCCode": "",
    "fProductName": "",
    "fclnvCode": "",
    "fclnvStd": "",
    "page": 1,
    "size": 10,
    "startTime": "",
    "sumPage": 0,
    "acceptState": "",
    "insType": ""
  }
})
let select = reactive({
  saom: [{label: '允许', value: '1'}, {label: '拒收', value: '-1'}, {label: '草稿', value: '0'}]
})

function keyMove(scope, event) {
  if (event.keyCode === 38 || event.keyCode === 40) {
    moveFunc(scope, event.keyCode);
  }
}

function moveFunc(scope, keyCode) {
  let row = scope.row;
  let property = scope.column.property;
  let obj = Object.keys(row);
  let index = obj.indexOf(property);
  let dataIndex = scope.$index;
  let refName;
  switch (keyCode) {
    case 38: // 上箭头
      refName = `data-${obj[index]}${dataIndex - 1}_ref`
      break;
    case 40: // 下箭头
      refName = `data-${obj[index]}${dataIndex + 1}_ref`
      break
  }
  const input = document.getElementById(refName);
  if (!input) return;
  input.focus();
};

function selectItem(ev) {
  data.selectArr = []
  data.selectArr = ev
}

function hisSelect() {
  loding.cx = true
  ajax.post('/avc/jsp', {
    body: {
      ...(form.select),
      startTime: (form.select.startTime.length < 1) ? (null) : (formdate.frometDate(form.select.startTime)),
      endTime: (form.select.endTime.length < 1) ? (null) : (formdate.frometDate(form.select.endTime))
    }
  }, res => {
    loding.cx = false
    if (res.code == 200) {
      data.cx = res.data.list
      form.select.sumPage = res.data.totalCount
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    loding.cx = false
    ElMessage.error(err.msg)
  })
}

const hisExport = () => {
  const data = {
    ...(form.select),
    startTime: (form.select.startTime.length < 1) ? null : (formdate.frometDate(form.select.startTime)),
    endTime: (form.select.endTime.length < 1) ? null : (formdate.frometDate(form.select.endTime))
  };
  export_goods_data(data).then(res => {
    let blob = new Blob([res], {
      type: "application/vnd.ms-excel,charset=UTF-8",
    });
    const link = document.createElement("a");
    // link.style.display = "none";
    link.href = URL.createObjectURL(blob);
    // 获取文件名
    link.download = "到货单.xlsx";
    document.body.appendChild(link);
    link.click(); //会触发a标签的href
    link.remove(); // 一次性的，用完就删除a标签
    ElMessage.success("导出成功");
  });
};

/**
 * 撤销入库
 */
function cancelStock(id) {
  ElMessageBox.confirm('是否撤销该入库单?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(res => {
    ajax.post('/avc/cancelAv?fId=' + id, {body: {}}, res => {
      if (res.code == 200) {
        ElMessage.success('撤销成功！')
        hisSelect()
        return
      }
      ElMessage.error(res.msg)
    }, err => {
      ElMessage.error('服务器异常')
    })
  }).catch(err => {
  })
}

/* 到货单扫码查询 */
function smCX() {
   let flag = false;
   if (data.saom) {
     flag = data.saom.filter(item => item.fBarCode == form.tm);
   }
   console.log(flag);
  if (form.dj.length < 1 && form.tm.length < 1) {
    ElMessage.error('查询条件不能为空！')
  } else if (form.tm.length > 0) {
    if (flag.length >= 1) {
       return;
    }
    data.selectArr = []
    loding.saom = true;
    ajax.post('/avc/sbc?bar=' + encodeURIComponent(form.tm), {body: {}}, res => {
      if (res.code === 200) {
        const obj = res.data;
        obj.fBanbencode = "A00";
        // arr.splice(arr.length-1,0,);
        // console.log(arr);
        data.saom.push({
          ...(obj),
          fQCAceptType: 1,
          fInsType: '-1'
        });
        console.log(obj)
      } else {
        ElMessage.error(res.msg)
      }
      form.dj = ''
      form.tm = ''
      loding.saom = false
      inputEE()
    }, err => {
      ElMessage.error('服务器异常')
      loding.saom = false
      form.dj = ''
      form.tm = ''
    })
  } else if (form.dj.length > 0) {
    loding.saom = true
    ajax.post2('/avc/sbd', {
      body: `code=${form.dj}`,
    }, res => {
      if (res.code == 200) {
        data.saom = res.data.map((item, index) => {
          return {
            ...item,
            fQCAceptType: 1,
            fInsType: '1'
          }
        })
      } else {
        ElMessage.error(res.msg)
      }
      form.dj = ''
      form.tm = ''
      loding.saom = false
      inputEE()
    }, err => {
      ElMessage.error('服务器异常')
      loding.saom = false
      form.dj = ''
      form.tm = ''
    })
  }
}

// function dtj(ev) {
//   let arr = []
//   arr.push(ev.row)
//   ajax.post('/avc/updateAv', {
//     body: arr
//   }, res => {
//     if (res.code == 200) {
//       ElMessage.success('提交成功')
//       for (let i = 0; i < data.selectArr.length; i++) {
//         if ((data.selectArr[i].fclnvCode == ev.row.fclnvCode) && (data.selectArr[i].fBarCode == ev.row.fBarCode)) {
//           data.selectArr.splice(i, 1)
//           data.saom.splice(i, 1)
//         }
//       }
//     } else {
//       ElMessage.error(res.msg)
//     }
//   }, err => {
//     ElMessage.error(err.msg)
//   })
// }

function tj() {
  if (data.selectArr.length == 0) {
    ElMessage.error('选择数据为空，无法提交')
  } else {
    ajax.post('/avc/updateAv', {
      body: data.selectArr
    }, res => {
      if (res.code == 200) {
        ElMessage.success('提交成功')
        for (let i in data.selectArr) {
          for (let j in data.saom) {
            if (data.selectArr[i].fBarCode == data.saom[j].fBarCode) {
              data.saom.splice(j, 1)
            }
          }
        }
        data.selectArr = []
      } else {
        ElMessage.error(res.msg)
      }
    }, err => {
      ElMessage.error(err.msg)
    })
  }
}
const inputEE = (event) => {
    for (let i in data.saom) {
        if ((data.saom[i].fFinValidQuantity) > (data.saom[i].fICheckQuantity)) {
          data.saom[i].fFinValidQuantity = 0
          ElMessage.error('不良数量【小于等于抽检数】')
        }
        if ((data.saom[i].fICheckQuantity) > (data.saom[i].fIQuantity)) {
          data.saom[i].fICheckQuantity = 0
          ElMessage.error('抽检数量【不能大于到货数】')
        }
        data.saom[i].fVaildQuantity = data.saom[i].fICheckQuantity - (data.saom[i].fFinValidQuantity)
        if (data.saom[i].fFinValidQuantity > 0) {
          data.saom[i].fQCAceptType = -1
        } else {
          data.saom[i].fQCAceptType = 1
        }
    }
};
onMounted(() => {
  ajax.post('/common/dict?name=物料分类', {body: {}}, res => {
    if (res.code == 200) {
      data.wl = res.data
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('获取物料分类失败')
  })
  ajax.post('/common/dict?name=采购方', {body: {}}, res => {
    if (res.code == 200) {
      data.cgf = res.data
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('获取采购方失败')
  });
  ajax.post("/common/dict?name=到货单版本", {body: {}}, res => {
    if (res.code == 200) {
      data.bbh = res.data
    } else {
      ElMessage.error(res.msg);
    }
  }, err => {
    ElMessage.error('获取版本号失败')
  });
  ajax.post("/common/dict?name=缺陷描述", {body: {}}, res => {
    if (res.code == 200) {
      data.qx = res.data
    } else {
      ElMessage.error(res.msg);
    }
  }, err => {
    ElMessage.error('获取缺陷描述失败')
  });
})
</script>

<template>
  <div class="scan">
    <div class="content">
      <div class="Modification">
        <div class="title">
          到货单扫描
        </div>
        <div class="info">
          <el-form @submit.native.prevent>
            <el-row :gutter="10">
              <el-col v-show="false" :span="4">
                <el-form-item label="单据:">
                  <el-input type="text" autofocus v-model.trim="form.dj" @keyup.enter.stop="smCX"
                            :focus="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="条码:">
                  <el-input type="text" autofocus v-model="form.tm" @keyup.enter.stop="smCX"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-button type="primary" plain @click="smCX">查询</el-button>
              </el-col>
              <el-col :span="1">
                <el-button v-if="data.selectArr.length > 0" type="success" plain @click="tj">提交</el-button>
              </el-col>
            </el-row>
          </el-form>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-table :data="data.saom" border style="width: 100%; height: 70vh" v-loading="loding.saom"
                        @selection-change="selectItem">
                <el-table-column fixed align="center" type="selection"></el-table-column>
                <el-table-column align="center" width="60" label="序号" #default="scope">
                  {{ scope.$index + 1 }}
                </el-table-column>
                <el-table-column align="center" width="100" prop="fDDate" label="日期" :show-overflow-tooltip="true"/>
                <el-table-column align="center" prop="fclnvCode" label="物料编码" width="120"
                                 :show-overflow-tooltip="true"/>
                <!-- <el-table-column prop="fBanbencode" label="版本号" min-width="120" :show-overflow-tooltip="true" /> -->
                <el-table-column label="版本号" width="120" align="center">
                  <template #default="{ row }">
                    <!--                    <el-input v-model.number="row.fBanbencode"></el-input>-->
                    <el-select v-model="row.fBanbencode" class="m-2" placeholder="Select" size="default">
                      <el-option
                          v-for="item in data.bbh"
                          :key="item"
                          :label="item"
                          :value="item"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="fProductName" label="物料名称" width="100"
                                 :show-overflow-tooltip="true"/>
                <!-- <el-table-column prop="xxx" label="物料分类" min-width="120" :show-overflow-tooltip="true" /> -->
                <el-table-column label="物料分类" width="130" align="center">
                  <template #default="{ row }">
                    <el-select v-model="row.fInvType" class="m-2" placeholder="Select" size="default">
                      <el-option
                          v-for="item in data.wl"
                          :key="item"
                          :label="item"
                          :value="item"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <!-- <el-table-column label="厂商制造批号" width="120" align="center">
                  <template #default="{ row }">
                    <el-input v-model="row.fManufacturerBatchNo"></el-input>
                  </template>
                </el-table-column> -->
                <!-- <el-table-column prop="fPurName" label="采购方" min-width="120" :show-overflow-tooltip="true" /> -->
                <el-table-column label="采购方" width="130" align="center">
                  <template #default="{ row }">
                    <el-select v-model="row.fPurName" class="m-2" placeholder="Select" size="default">
                      <el-option
                          v-for="item in data.cgf"
                          :key="item"
                          :label="item"
                          :value="item"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="出厂检验报告" width="140" align="center">
                  <template #default="{ row }">
                    <el-select v-model="row.fInsType" class="m-2" placeholder="Select" size="default">
                      <el-option
                          v-for="item in [{label:'是',value:'1'},{label:'否',value:'-1'}]"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="fIQuantity" label="本批次总数" min-width="120" :show-overflow-tooltip="true" /> -->
                <el-table-column label="到货数量" width="80" align="center">
                  <template #default="{ row }">
                    <el-input disabled="true" v-model.number="row.fIQuantity" :min="0" @input="inputEE"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="fICheckQuantity" label="抽检数量" width="80" align="center">
                  <template #default="scope">
                    <el-input @keydown="keyMove(scope, $event)" v-model.number="scope.row.fICheckQuantity"
                              :min="0" :id="'data-' + scope.column.property + scope.$index + '_ref'" @input="inputEE"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="良品数量" width="80" align="center">
                  <template #default="{ row }">
                    <el-input v-model.number="row.fVaildQuantity" disabled></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="fFinValidQuantity" label="不良数量" width="80" align="center">
                  <template #default="scope">
                    <el-input @keydown="keyMove(scope, $event)" v-model.number="scope.row.fFinValidQuantity"
                              :min="0" :id="'data-' + scope.column.property + scope.$index + '_ref'" @input="inputEE"></el-input>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="条码号" prop="fBarCode" width="100" align="center"
                                 :show-overflow-tooltip="true"/> -->
                <el-table-column align="center" prop="fCVenName" label="供应商全称" width="120"
                                 :show-overflow-tooltip="true"/>
                <el-table-column align="center" prop="fCBatch" label="批次号" width="90" :show-overflow-tooltip="true"/>
                <!-- <el-table-column prop="xxx" label="合格率"  min-width="120" :show-overflow-tooltip="true" /> -->
                <!-- <el-table-column prop="xxx" label="检验员"  min-width="120" :show-overflow-tooltip="true" /> -->
                <el-table-column label="缺陷描述" width="150" align="center">
                  <template #default="{ row }">
                    <el-input v-model="row.fDefectsRemark" placeholder="请输入缺陷描述"></el-input>
                    <!-- <el-select v-model="row.fDefectsRemark" class="m-2" placeholder="Select" size="default"> -->
                      <!-- <el-option -->
                         <!-- v-for="item in data.qx" -->
                         <!-- :key="item" -->
                         <!-- :label="item" -->
                         <!-- :value="item" -->
                      <!-- /> -->
                    <!-- </el-select> -->
                  </template>
                </el-table-column>
                <!-- 							<el-table-column label="实收数量" width="180" align="center">
                                <template #default="{ row }">
                                  <el-input v-model.number="row.fFinStockQuantity" :min="0" :placeholder="(row.fIQuantity)-(row.fFinValidQuantity)"></el-input>
                                </template>
                              </el-table-column> -->
                <el-table-column label="验收状态" width="130" align="center">
                  <template #default="scope">
                    <el-select v-model="scope.row.fQCAceptType" class="m-2" placeholder="Select" size="default">
                      <el-option
                          v-for="item in [{label:'合格',value: 1},{label:'不合格',value:-1}]"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="检验说明" width="140" align="center">
                  <template #default="{ row }">
                    <el-input v-model="row.fQCRemark"></el-input>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="fCCode" label="处理方式"  min-width="120" :show-overflow-tooltip="true" /> -->
                <el-table-column label="处理方式" width="140" align="center">
                  <template #default="{ row }">
                    <el-input v-model="row.fHandling"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="备注" width="100" align="center">
                  <template #default="{ row }">
                    <el-input v-model="row.fRemark"></el-input>
                  </template>
                </el-table-column>
                <!--                <el-table-column fixed="right" align="center" label="操作" width="120">-->
                <!--                  <template #default="scope">-->
                <!--                    <el-button @click="dtj(scope)">-->
                <!--                      提交-->
                <!--                    </el-button>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <!-- <el-table-column prop="fCCode" label="到货单号"  min-width="120" :show-overflow-tooltip="true" /> -->
                <!-- <el-table-column prop="fCVenCode" label="供应商编号"  min-width="120" :show-overflow-tooltip="true"/> -->
                <!-- <el-table-column prop="fclnvStd" label="规格" min-width="120" :show-overflow-tooltip="true" /> -->
                <!-- <el-table-column prop="aaa" label="采购属性" min-width="120" :show-overflow-tooltip="true" /> -->
                <!-- <el-table-column prop="fBarCode" label="条码号" min-width="120" :show-overflow-tooltip="true" /> -->
              </el-table>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 取消滚动条样式 */
.scan::-webkit-scrollbar {
  display: none;
}

.scan {
  padding: 0.625rem;
  box-sizing: border-box;
  width: 100%;
  height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgb(4, 30, 55);
  overflow: auto;

  :deep(.el-loading-mask) {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      width: 100%;
      color: #fff;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0.225rem 0 0.225rem 0.9375rem;
      font-size: 0.95rem;
      background-image: linear-gradient(to right, rgb(14, 109, 186), rgb(3, 69, 131));
    }

    .Modification {
      width: 100%;
      background-color: rgb(4, 55, 93);
      border-radius: 0.3125rem;
      overflow: auto;
      margin-bottom: 0.9375rem;
      box-shadow: 0.125rem 0.125rem 0.0625rem #000;

      .info {
        box-sizing: border-box;
        padding: 0.9375rem;
        width: 100%;

        :deep(.is-guttered) {
          color: #fff;
          font-size: 0.875rem;
          line-height: 1rem;
          box-sizing: border-box;
          padding-bottom: 0.375rem;
        }

        /* 表格行背景颜色 */

        :deep(.el-table tr) {
          background-color: rgb(4, 55, 93);
          color: #fff;
        }

        /* 表格行移入颜色 */

        :deep(.el-table--enable-row-hover .el-table__body tr:hover > td ) {
          background-color: #ff99004a;
        }

        /* 固定列颜色 */

        :deep(td.el-table-fixed-column--right) {
          background-color: rgb(9, 93, 164) !important;
        }

        /* 表格标题颜色 */

        :deep(.el-table th.el-table__cell) {
          background-color: rgb(4, 30, 55);
          font-weight: 700;
        }

        /* 表格样式 */

        :deep(.el-table) {
          background-color: transparent;
          --el-table-border-color: none;
          height: 15.625rem;
        }

        /* 表格行边框颜色 */

        :deep(.el-table td, .el-table th) {
          border: 0.052083rem solid rgb(4, 30, 55) !important;
        }

        /* 设置多行输入框样式 */

        :deep(.el-textarea) {
          margin: 0.78125rem 0;
        }

        :deep(.el-textarea__inner) {
          background-color: rgb(4, 30, 55);
          color: #fff;
          width: 100%;
          height: 2.604167rem;
          text-align: center;
          line-height: 2.604167rem;
        }

        :deep(.el-textarea__inner::-webkit-scrollbar) {
          display: none;
        }

        :deep(.el-checkbox) {
          color: #fff;
        }

        .table-head-botton {
          width: 100%;
          display: flex;

          button {
            outline: none;
            border: 0.052083rem solid rgb(4, 55, 93);
            background-color: rgb(4, 30, 55);
            color: #fff;
            padding: 0.260417rem;
            border-radius: 0.260417rem 0.260417rem 0 0;
            border-bottom: none;
          }
        }
      }
    }

    .Modification {
      /* 表格样式 */

      :deep(.el-table) {
        --el-table-border-color: none;
        //height: 11.7rem !important;
      }
    }
  }
}

:deep(.el-form-item__label) {
  font-size: 0.75rem;
  color: #fff;
}

:deep(.el-input__wrapper) {
  background-color: rgb(9, 93, 164);
}

:deep(input::placeholder) {
  color: #fff;
}

:deep(.el-input__inner) {
  color: #fff;
}

/* 移入行颜色 */
:deep(.el-table tbody tr:hover > td) {
  background-color: rgba(9, 93, 164, 0.2);
}

/* input disabled 样式 */
:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: rgb(9, 93, 164);
}

.select-cont {
  :deep(.el-input__wrapper) {
    background-color: rgb(255, 255, 255) !important;
  }

  :deep(.el-input__inner) {
    color: #000;
  }

  .table {
    width: 100%;
    padding: 0.2rem;
    box-sizing: border-box;
    background-color: #fff;
  }

  .tab {
    display: flex;
    padding-left: 0.2rem;
    margin-top: 0.7rem;

    .li {
      width: 6.125rem;
      height: 1.3rem;
      background-color: rgb(235, 236, 239);
      line-height: 1.3rem;
      text-align: center;
      margin: 0.1rem;
      border-radius: 0.3125rem 0.3125rem 0 0;
    }
  }
}

:deep(.el-pagination__total) {
  color: #fff !important;
}

:deep(.el-pagination__jump) {
  color: #fff !important;
}

:deep(.el-input.is-disabled .el-input__inner) {
  -webkit-text-fill-color: #000;
}
</style>